<template>
  <div class="indicator-wrapper" v-loading="loading">
    <el-row style="width: 100%" :gutter="16">
      <el-col :span="8">
        <el-card style="" shadow="always">
          <el-statistic title="系统总用户数" :value="data?.userCount || 0" />
          <div class="statistic-footer">个</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="" shadow="always">
          <el-statistic title="系统文章数" :value="data?.articleCount || 0" />
          <div class="statistic-footer">篇</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="" shadow="always">
          <el-statistic title="系统总菜单数" :value="data?.menuCount || 0" />
          <div class="statistic-footer">个</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="jsx" setup>
import { statistic } from "@/api/common";
import { ref, onMounted } from "vue"

const loading = ref(false);
const data = ref({});
const init = async () => {
  loading.value = true;
  try {
    const result = await statistic({});
    data.value = result;
  } catch (error) {
  }
  loading.value = false;
}

onMounted(() => {
  init()
})
</script>

<style scoped lang="scss">
.indicator-wrapper {
  display: flex;
  justify-content: center;
  // align-items: center;
  width: 100%;
  height: 100%;
  .el-col {
    text-align: center;
  }
  :deep(.el-statistic__head) {
    font-size: 16px;
    color: var(--el-text-color-primary);
  }
  :deep(.el-statistic__content) {
    font-size: 20px;
    color: var(--el-text-color-primary);
  }
  .statistic-footer {
    margin-top: 8px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }
}
</style>
